<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/vendor.min.css">
    <link rel="stylesheet" href="css/plugins.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    <style>
        html{
            height: 100%;
            overflow-y: hidden;
        }
        body{
            height: 100%;
            overflow-y: auto;
        }
    </style>
</head>

<body>
<div class="main-wrapper">
    <main class="main-content">
        <div class="checkout-area section-space-y-axis-100" style="padding-top: 50px;">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="coupon-accordion">
                            <h3>Returning customer? <span id="showlogin">Click here to login</span></h3>
                            <div id="checkout-login" class="coupon-content">
                                <div class="coupon-info">
                                    <p class="coupon-text mb-1">Quisque gravida turpis sit amet nulla posuere lacinia. Cras sed est
                                        sit amet ipsum luctus.</p>
                                    <form action="javascript:void(0)">
                                        <p class="form-row-first">
                                            <label class="mb-1">Username or email <span class="required">*</span></label>
                                            <input type="text" class="user">
                                            <span class="userts" style="font-size: 12px;color: red"></span>
                                        </p>
                                        <p class="form-row-last">
                                            <label>Password <span class="required">*</span></label>
                                            <input type="text" class="password">
                                            <span class="passwordts" style="font-size: 12px;color: red"></span>
                                        </p>
                                        <p class="form-row">
                                            <input type="checkbox" id="remember_me">
                                            <label for="remember_me">Remember me</label>
                                        </p>
                                        <p class="lost-password"><a href="javascript:void(0)">Lost your password?</a></p>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-12">
                        <form action="javascript:void(0)">
                            <div class="checkbox-form">
                                <h3>Billing Details</h3>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="checkout-form-list">
                                            <label>First Name <span class="required">*</span></label>
                                            <input placeholder="" name="firstName" type="text" class="firstname">
                                            <span class="firstnamets" style="font-size: 12px;color: red"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="checkout-form-list">
                                            <label>Last Name <span class="required">*</span></label>
                                            <input placeholder="" name="lastName" type="text" class="lastname">
                                            <span class="lastnamets" style="font-size: 12px;color: red"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="checkout-form-list">
                                            <label>Company Name</label>
                                            <input placeholder="" name="companyName" type="text" class="compangname">
                                            <span class="compangnamets" style="font-size: 12px;color: red"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="checkout-form-list">
                                            <label>Address <span class="required">*</span></label>
                                            <input placeholder="Street address" name="streetAddress" type="text" class="adress">
                                            <span class="addressts" style="font-size: 12px;color: red"></span>
                                        </div>
                                    </div>
<!--                                    <div class="col-md-12">-->
<!--                                        <div class="checkout-form-list">-->
<!--                                            <input placeholder="Apartment, suite, unit etc. (optional)" type="text" class="apartment">-->
<!--                                            <span class="apartmentts" style="font-size: 12px;color: red"></span>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                    <div class="col-md-12">
                                        <div class="checkout-form-list">
                                            <label>Town / City <span class="required">*</span></label>
                                            <input type="text" class="town" name="townOrCity">
                                            <span class="townts" style="font-size: 12px;color: red"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="country-select clearfix">
                                            <label>State / County<span class="required">*</span></label>
                                            <select class="myniceselect nice-select wide" id="country1">
                                                <option data-display="Vientiane"></option>
                                                <option value="Attapeu">Attapeu 阿速坡</option>
                                                <option value="Bokeo">Bokeo 博胶</option>
                                                <option value="Bolikhamsai">Bolikhamsai  波利坎赛</option>
                                                <option value="Champasak">Champasak 占巴塞</option>
                                                <option value="Houaphanh">Houaphanh 华潘</option>
                                                <option value="Khammouane">Khammouane 甘蒙</option>
                                                <option value="Luang Namtha">Luang Namtha 琅南塔</option>
                                                <option value="Luang Prabang">Luang Prabang  琅勃拉邦</option>
                                                <option value="Oudomxay">Oudomxay 乌多姆赛</option>
                                                <option value="Phongsaly">Phongsaly 丰沙里</option>
                                                <option value="Salavan">Salavan 萨拉万</option>
                                                <option value="Savannakhet">Savannakhet 沙湾拿吉</option>
                                                <option value="Vientiane Province">Vientiane Province 万象省</option>
                                                <option value="Vientiane">Vientiane 万象</option>
                                                <option value="Sainyabuli">Sainyabuli 赛尼亚布力</option>
                                                <option value="Sekong">Sekong 塞公</option>
                                                <option value="Xiangkhouang">Xiangkhouang 香巳</option>
                                                <option value="Xaisomboun">Xaisomboun 赛松邦</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="checkout-form-list">
                                            <label>Postcode / Zip <span class="required">*</span></label>
                                            <input placeholder="" name="postCode" type="text" class="postcode">
                                            <span class="postcodets" style="font-size: 12px;color: red"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="checkout-form-list">
                                            <label>Email Address <span class="required">*</span></label>
                                            <input placeholder="" name="emailAddress" type="email" class="email">
                                            <span class="emailts" style="font-size: 12px;color: red"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="checkout-form-list">
                                            <label>Phone <span class="required">*</span></label>
                                            <input type="text" name="phone" class="phone">
                                            <span class="phonets" style="font-size: 12px;color: red"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="checkout-form-list create-acc">
                                            <input id="cbox" type="checkbox" class="gouxuan1">
                                            <label for="cbox">Create an account?</label>
                                        </div>
                                        <div id="cbox-info" class="checkout-form-list create-account">
                                            <p>Create an account by entering the information below. If you are a returning
                                                customer please login at the top of the page.</p>
                                            <label>Account password <span class="required">*</span></label>
                                            <input placeholder="password" type="password" class="account">
                                            <span class="acountts" style="font-size: 12px; color: red;"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="different-address">
                                    <div class="ship-different-title">
                                        <h3>
                                            <label>Ship to a different address?</label>
                                            <input id="ship-box" type="checkbox" class="gouxuan">
                                        </h3>
                                    </div>
                                    <div id="ship-box-info" class="row">
                                        <div class="col-md-12">
                                            <div class="myniceselect country-select clearfix">
                                                <label>Country <span class="required">*</span></label>
                                                <select class="myniceselect nice-select wide" id="country2">
                                                    <option data-display="Bangladesh">Bangladesh</option>
                                                    <option value="uk">London</option>
                                                    <option value="rou">Romania</option>
                                                    <option value="fr">French</option>
                                                    <option value="de">Germany</option>
                                                    <option value="aus">Australia</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="checkout-form-list">
                                                <label>First Name <span class="required">*</span></label>
                                                <input placeholder="" type="text" class="firstname1">
                                                <span class="firstnamets1" style="font-size: 12px;color: red"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="checkout-form-list">
                                                <label>Last Name <span class="required">*</span></label>
                                                <input placeholder="" type="text" class="lastname1">
                                                <span class="lastnamets1" style="font-size: 12px;color: red"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="checkout-form-list">
                                                <label>Company Name</label>
                                                <input placeholder="" type="text" class="companyname1">
                                                <span class="compangnamets1" style="font-size: 12px;color: red"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="checkout-form-list">
                                                <label>Address <span class="required">*</span></label>
                                                <input placeholder="Street address" type="text" class="address1">
                                                <span class="addressts1" style="font-size: 12px;color: red"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="checkout-form-list">
                                                <input placeholder="Apartment, suite, unit etc. (optional)" type="text" class="apartment1">
                                                <span class="apartmentts1" style="font-size: 12px;color: red"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="checkout-form-list">
                                                <label>Town / City <span class="required">*</span></label>
                                                <input type="text" class="town1">
                                                <span class="townts1" style="font-size: 12px;color: red"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="checkout-form-list">
                                                <label>State / County <span class="required">*</span></label>
                                                <input placeholder="" type="text" class="country1">
                                                <span class="countryts1" style="font-size: 12px;color: red"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="checkout-form-list">
                                                <label>Postcode / Zip <span class="required">*</span></label>
                                                <input placeholder="" type="text" class="postcode1">
                                                <span class="postcodets1" style="font-size: 12px;color: red"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="checkout-form-list">
                                                <label>Email Address <span class="required">*</span></label>
                                                <input placeholder="" type="email" class="email1">
                                                <span class="emailts1" style="font-size: 12px;color: red"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="checkout-form-list">
                                                <label>Phone <span class="required">*</span></label>
                                                <input type="text" class="phone1" >
                                                <span class="phonets1" style="font-size: 12px;color: red"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="order-notes">
                                        <div class="checkout-form-list checkout-form-list-2">
                                            <label>Order Notes</label>
                                            <textarea id="checkout-mess" cols="30" rows="10" placeholder="Notes about your order, e.g. special notes for delivery." class="notes"></textarea>
                                            <span class="notests" style="font-size: 12px;color: red"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-lg-6 col-12">
                        <div class="your-order">
                            <h3>Your order</h3>
                            <div class="your-order-table table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th class="cart-product-name">Product</th>
                                        <th class="cart-product-total">Total</th>
                                    </tr>
                                    </thead>
                                    <tbody class="tbody">
                                    <tr class="cart_item">
                                        <td class="cart-product-name"> Vestibulum suscipit<strong class="product-quantity">
                                            × 1</strong></td>
                                        <td class="cart-product-total"><span class="amount">$165.00</span></td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <tr class="cart-subtotal">
                                        <th>shipping</th>
                                        <td><span class="amount" id="shipping">0.00</span></td>
                                    </tr>
                                    <tr class="order-total">
                                        <th>Order Total</th>
                                        <td><strong><span class="amount" id="allMoney">$215.00</span></strong></td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="payment-method">
                                <div class="payment-accordion">
                                    <div id="accordion">
                                        <div class="card">
                                            <div class="card-header" id="#payment-1">
                                                <h5 class="panel-title">
                                                    <a href="javascript:void(0)" class="" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true">
                                                        Direct Bank Transfer.
                                                    </a>
                                                </h5>
                                            </div>
                                            <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
                                                <div class="card-body">
                                                    <p>Make your payment directly into our bank account. Please use your Order
                                                        ID as the payment
                                                        reference. Your order won’t be shipped until the funds have cleared in
                                                        our account.</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <div class="card-header" id="#payment-2">
                                                <h5 class="panel-title">
                                                    <a href="javascript:void(0)" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false">
                                                        Cheque Payment
                                                    </a>
                                                </h5>
                                            </div>
                                            <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
                                                <div class="card-body">
                                                    <p>Make your payment directly into our bank account. Please use your Order
                                                        ID as the payment
                                                        reference. Your order won’t be shipped until the funds have cleared in
                                                        our account.</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <div class="card-header" id="#payment-3">
                                                <h5 class="panel-title">
                                                    <a href="javascript:void(0)" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false">
                                                        PayPal
                                                    </a>
                                                </h5>
                                            </div>
                                            <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
                                                <div class="card-body">
                                                    <p>Make your payment directly into our bank account. Please use your Order
                                                        ID as the payment
                                                        reference. Your order won’t be shipped until the funds have cleared in
                                                        our account.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="order-button-payment">
                                        <input value="Place order" type="button"style="background-color:#006fb7 " class="tjorder">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <div class="footer-area">
        <div class="footer-bottom py-3" data-bg-color="#1EB9EE">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="copyright">
                            <span class="copyright-text text-white">Copyright &copy; 2023.LAO Asia Unicom All rights reserved.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="scroll-to-top" href="">
        <i class="fa fa-chevron-up"></i>
    </a>
</div>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/token.js"></script>
<script src="js/vendor.min.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/main.min.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>
</body>
<script>

    var layer = layui.layer;
    var form = layui.form;

    var moduleName = "shop";
    var defaultLang = layui.data('langTab').langType;
    initLangConfig({
        defaultLang:defaultLang,
        filePath: "js/i18n/"+moduleName+"/",
        module:moduleName,
        base:"js/"
    })
    var i18np = null;
    function changeLang(lang) {
        defaultLang = lang;
        reloadI18n({
            defaultLang:lang,
            filePath: "js/i18n/"+moduleName+"/",
            module:moduleName,
        })
        i18np.loadProperties(moduleName);
    }

    layui.config({base: 'js/'})
        // 继承treetable.js插件
        .extend({i18np: 'i18n'}).use([ 'i18np','jquery'], function () {
        i18np = layui.i18np;
        i18np.loadProperties(moduleName);
    });

    var address = [];
    //查询用户地址
    $.ajax({
        url: HOST + "webapi/address/getAddress",
        type: "get",
        headers: {"token": localStorage.getItem("token")},
        data: {type: 1},
        success: function (res) {
            if (res.code == 200 && res.data.length > 0){
                address = res.data;
                $("input[name='firstName']").val(address[0].firstName);
                $("input[name='lastName']").val(address[0].lastName);
                $("input[name='companyName']").val(address[0].companyName);
                $("input[name='streetAddress']").val(address[0].streetAddress);
                $("input[name='townOrCity']").val(address[0].townOrCity);
                $("input[name='postCode']").val(address[0].postCode);
                $("input[name='phone']").val(address[0].phone);
            }
        }
    });

    // 查询购物车详情
    $.ajax({
        url: HOST + "webapi/cart/getgood",
        type: "get",
        headers: {"token": localStorage.getItem("token")},
        data: {userId: localStorage.getItem("userId")},
        success: function (res) {
            var s = '';
            var sum = 0;    // 计算总价格
            if(res.code==200){
                for (let i = 0; i <res.data.length ; i++) {
                    s+=`<tr class="cart_item">
                        <td class="cart-product-name">${res.data[i].goods.nameEn}<strong class="product-quantity">
                            × ${res.data[i].num}</strong></td>
                        <td class="cart-product-total"><span class="amount">${res.data[i].num*res.data[i].money} ₭</span></td>
                    </tr>`;
                    sum+=res.data[i].num*res.data[i].money;
                }
                $(".tbody").html(s);
                $("#allMoney").html(sum+"₭");
                $("#shipping").html(sum+"K");
            }
        }
    });

    var tiorder=document.querySelector('.tjorder');
    tiorder.onclick=function (){
        // var user=document.querySelector(".user").value;
        // if(user==null ||user=="" || user.length==0){
        //     document.getElementById("checkout-login").style.display="block";
        //     document.querySelector(".userts").innerHTML="你还没有登录，请输入用户名";
        // }
        // var password=document.querySelector(".password").value;
        // if(password==null ||password=="" || password.length==0){
        //     document.querySelector(".passwordts").innerHTML="请输入密码";
        // }
        if (address.length > 0){
            var email= document.querySelector('.email').value;
            if(email==null ||email=="" || email.length==0){
                document.querySelector(".emailts").innerHTML="请输入邮箱";
            }
            var notes= document.querySelector('.notes').value;
            if(notes==null ||notes=="" || notes.length==0){
                document.querySelector(".notests").innerHTML="请输入备注";
            }
            let allMoney = parseFloat($("#allMoney").html());
            // 提交订单
            $.ajax({
                url:HOST+`webapi/order/addorder?isNewAddress=0&isNewAccount=0&orPrice=${allMoney}&orRemark=${notes}&orTotalNum=1&orPeisongType=2&email=${email}&userId=${localStorage.getItem('userId')}`,
                headers:{"token":localStorage.getItem("token")},
                type:"post",
                contentType:"application/json",
                data:JSON.stringify(address[0]),
                success:function (res) {
                    if(res.code==200){
                        layer.msg("订单提交成功");
                    }
                }
            })
        }else{
            var firstname= document.querySelector('.firstname').value;
            if(firstname==null ||firstname=="" || firstname.length==0){
                document.querySelector(".firstnamets").innerHTML="请输入你的名字";
            }
            var lastname= document.querySelector('.lastname').value;
            if(lastname==null ||lastname=="" || lastname.length==0){
                document.querySelector(".lastnamets").innerHTML="请输入你的名字";
            }
            var compangname= document.querySelector('.compangname').value;
            if(compangname==null ||compangname=="" || compangname.length==0){
                document.querySelector(".compangnamets").innerHTML="请输入公司名字";
            }
            var adress= document.querySelector('.adress').value;
            if(adress==null ||adress=="" || adress.length==0){
                document.querySelector(".addressts").innerHTML="请输入街道地址";
            }
            // var apartment= document.querySelector('.apartment').value;
            // if(apartment==null ||apartment=="" || apartment.length==0){
            //     document.querySelector(".apartmentts").innerHTML="请输入公寓或者单位地址";
            // }
            var town= document.querySelector('.town').value;
            if(town==null ||town=="" || town.length==0){
                document.querySelector(".townts").innerHTML="请输入镇地址";
            }
            var conuntry= document.getElementById('country1').value;
            if(conuntry==null ||conuntry=="" || conuntry.length==0){
                document.querySelector(".countryts").innerHTML="请输入乡地址";
            }
            var postcode= document.querySelector('.postcode').value;
            if(postcode==null ||postcode=="" || postcode.length==0){
                document.querySelector(".postcodets").innerHTML="请输入邮政编码";
            }
            var email= document.querySelector('.email').value;
            if(email==null ||email=="" || email.length==0){
                document.querySelector(".emailts").innerHTML="请输入邮箱";
            }
            var phone= document.querySelector('.phone').value;
            if(phone==null ||phone=="" || phone.length==0){
                document.querySelector(".phonets").innerHTML="请输入电话号码";
            }
            var notes= document.querySelector('.notes').value;
            if(notes==null ||notes=="" || notes.length==0){
                document.querySelector(".notests").innerHTML="请输入备注";
            }
            var gouxuan=document.querySelector('.gouxuan');
            if(gouxuan.checked==true){
                var firstname1=document.querySelector('.firstname1').value;
                if(firstname1==null ||firstname1=="" || firstname1.length==0){
                    document.querySelector(".firstnamets1").innerHTML="请输入你的名字";

                }
                var lastname1= document.querySelector('.lastname1').value;
                if(lastname1==null ||lastname1=="" || lastname1.length==0){
                    document.querySelector(".lastnamets1").innerHTML="请输入你的名字";
                }
                var compangname= document.querySelector('.compangname').value;
                if(compangname==null ||compangname=="" || compangname.length==0){
                    document.querySelector(".compangnamets1").innerHTML="请输入公司名字";
                }
                var address1= document.querySelector('.address1').value;
                if(address1==null ||address1=="" || address1.length==0){
                    document.querySelector(".addressts1").innerHTML="请输入街道地址";
                }
                var apartment1= document.querySelector('.apartment1').value;
                if(apartment1==null ||apartment1=="" || apartment1.length==0){
                    document.querySelector(".apartmentts1").innerHTML="请输入公寓或者单位地址";
                }
                var town1= document.querySelector('.town1').value;
                if(town1==null ||town1=="" || town1.length==0){
                    document.querySelector(".townts1").innerHTML="请输入镇地址";
                }
                var conuntry1= document.querySelector('.country1').value;
                if(conuntry1==null ||conuntry1=="" || conuntry1.length==0){
                    document.querySelector(".countryts1").innerHTML="请输入乡地址";

                }
                var postcode1= document.querySelector('.postcode1').value;
                if(postcode1==null ||postcode1=="" || postcode1.length==0){
                    document.querySelector(".postcodets1").innerHTML="请输入邮政编码";
                }
                var email1= document.querySelector('.email1').value;
                if(email1==null ||email1=="" || email1.length==0){
                    document.querySelector(".emailts1").innerHTML="请输入邮箱";
                }
                var phone1= document.querySelector('.phone1').value;
                if(phone1==null ||phone1=="" || phone1.length==0){
                    document.querySelector(".phonets1").innerHTML="请输入电话号码";
                }

            }
            let newAddress={};
            newAddress.firstName=firstname;
            newAddress.lastName=lastname;
            newAddress.companyName=compangname;
            newAddress.lastName=lastname;
            newAddress.streetAddress=$(".adress").val();
            newAddress.townOrCity=$(".town").val();
            newAddress.stateOrCounty=$("#country1").val();
            newAddress.postCode=$(".postcode").val();
            newAddress.phone=$(".phone").val();
            let allMoney = parseFloat($("#allMoney").html());
            // 提交订单
            $.ajax({
                url:HOST+`webapi/order/addorder?isNewAddress=1&isNewAccount=1&orPrice=${allMoney}&orRemark=${notes}&orTotalNum=1&orPeisongType=2&email=${email}&userId=${localStorage.getItem('userId')}`,
                headers:{"token":localStorage.getItem("token")},
                type:"post",
                contentType:"application/json",
                data:JSON.stringify(newAddress),
                success:function (res) {
                    if(res.code==200){
                        layer.msg("订单提交成功");
                    }
                }
            })
        }
    }

</script>
</html>